<script setup lang="ts">
import { IRegion } from '@/types/region';
import { reactive } from 'vue';
// typescript
const state = reactive({
});
const form = reactive({
  username: "",
  phone: "",
  region: [] as string[],
  address: "",
  isDefault: false
});

// 表单提交
const onFormSubmit = () => {

}

// 省市区选择器
const onPickerConfirm = (region: IRegion[]) => {
  form.region = region.map(x => x.name);
}

// 设为默认开关
const onSwitchChange = (ev: any) => {
  console.log(ev);
}

</script>

<!-- 地址表单 -->
<template>
  <view class="container">
    <form @submit="onFormSubmit">
      <view class="input-card">
        <view class="input-item">
          <label>姓名 </label>
          <input v-model="form.username" class="uni-input" name="username" placeholder="请输入收货人姓名" />
        </view>

        <view class="input-item">
          <label>电话</label>
          <input v-model="form.phone" class="uni-input" name="phone" placeholder="请输入收货人电话" />
        </view>
      </view>

      <view class="input-card">
        <view class="input-item region-input">
          <w-picker-region @confirm="onPickerConfirm">
            <input v-model="form.region" disabled class="uni-input" name="region" placeholder="所在地区(省、市、区)" />
          </w-picker-region>
        </view>

        <view class="input-item region-input">
          <input v-model="form.address" class="uni-input" name="address" placeholder="详细地址(街道、门牌号等)" />
        </view>
      </view>

      <view class="input-card">
        <view class="setting-default input-item">
          <view>设为默认地址</view>
          <view>
            <switch :checked="form.isDefault" name="isDefault" color="#FF6A00" style="transform:scale(0.8)" @change="onSwitchChange" />
          </view>
        </view>
      </view>

      <view class="button-view">
        <button hover-class="hover-class-opacity" form-type="submit">保存</button>
      </view>
    </form>
  </view>
</template>

<style scoped lang="scss">
// scss
.container {
  padding: 20rpx 0;
}

.input-card {
  background-color: #fff;
  margin-bottom: 20rpx;

  .input-item {
    display: flex;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1px solid $border-color;

    label {
      font-size: 32rpx;
      margin-right: 30rpx;
      color: $text-color;
    }

    input {
      font-size: 30rpx;
      padding: 0;
      line-height: initial;
    }

    &.region-input {
      > view {
        flex: 1;
      }

      input {
        width: 100%;
      }
    }
  }

  .setting-default {
    justify-content: space-between;
  }
}

.button-view {
  margin-top: 60rpx;
  padding: 0 60rpx;

  button {
    border-radius: 50px;
    background-color: $primary-color;
    color: #fff;
  }
}
</style>
